<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>旅游</title>
    <style>
        * {
            margin: 0;padding: 0;
        }
        #container {
            width: 100vw;
            height: 100vh;
        }

        .modal {
            position:fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <div class="modal">

    </div>
    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=40c8db88641fa21054f0227d74e69f60"></script>
    <script>
        var map = new AMap.Map('container', {
            zoom:12,//级别
            pitch:15,
            center: [120.395013,36.110967],//中心点坐标
            viewMode:'3D'//使用3D视图
        });

        const codeData = [{
            title: '第一海水浴场',
            location: [120.34129,36.057404],
            memo: '第一海水浴场和石老人海水浴场可选一处，景色基本差不多',
            driving: '地铁3号线',
            time: '全天开放',
            cost: '免费'
        },{
            title: '崂山景区',
            location: [120.618304,36.184912],
            memo: '自2022年6月1日至2022年12月31日 免费',
            time: '07:00-17:00',
            driving: '603路',
            cost: '120元'
        },{
            title: '石老人海水浴场',
            location: [120.46801,36.09168],
            memo: '看日出(日出时间4:41)',
            driving: '317路、386路、地铁2号线到石老人浴场（B1或B2）',
            time: '全天开放',
            cost: '免费'
        },{
            title: '八大关',
            location: [120.350904,36.053541],
            memo: '',
            driving: '468路、317路、地铁3号线到中山公园C口出',
            time: '全天开放',
            cost: '免费'
        },{
            title: '信号山公园',
            location: [120.331271,36.066592],
            driving: '228路、231路',
            memo: '',
            time: '(7:30-18:00)',
            cost: '15元'
        },{
            title: '天主教堂',
            location: [120.320609,36.067997],
            memo: '(周一到周六:8:30-18:00；周日:10:00-17:00(最晚入园17:00)；',
            driving: '225路、231路',
            time: '8:30-17:00',
            cost: '10元'
        },{
            title: '栈桥景区',
            location: [120.320424,36.058502],
            memo: '',
            driving: '2路、5路、地图3号线到青岛站G口出',
            time: '全天开放',
            cost: '免费'
        },{
            title: '海滨风景区小青岛公园',
            location: [120.323803,36.052759],
            memo: '自2022年6月1日至2022年12月31日 免费',
            time: '7:30-17:30',
            driving: '6路、26路',
            cost: '10元'
        },{
            title: '五四广场',
            location: [120.384561,36.06269],
            memo: '',
            driving: '231路、217路、468路、地铁3号线或2号线到五四广场C口出',
            time: '全天开放',
            cost: '免费'
        },{
            title: '情人坝',
            location: [120.390263,36.052382],
            driving: '301路、317路',
            memo: '',
            time: '全天开放',
            cost: '免费'
        },{
            title: '台东步行街',
            location: [120.353963,36.083311],
            memo: '',
            driving: '地铁2号线到台东站',
            time: '全天开放',
            cost: '免费'
        },{
            title: '奥帆中心',
            location: [120.393635,36.055296],
            memo: '',
            driving: '去情人坝路过',
            time: '5:00-23:00',
            cost: '10元'
        },{
            title: '小麦岛',
            location: [120.431284,36.054007],
            memo: '',
            driving: '232环线、225路、231路、地铁2号线到麦岛（需要专程）',
            time: '全天',
            cost: '免费'
        },{
            title: '青岛动物园',
            location: [120.349338,36.068593],
            memo: '',
            driving: '可以先去青岛动物园，在去青岛啤酒博物馆，在去台东步行街',
            time: '08:30-17:00',
            cost: '8.5元'
        },{
            title: '青岛啤酒博物馆',
            location: [120.346244,36.079282],
            memo: '自2022年6月1日至2022年12月31日 免费',
            time: '8:00-16:30',
            driving: '11路、15路、地铁2号线到利津路',
            cost: '60元'
        },{
            title: '黄岛',
            location: [120.245352,35.95703],
            memo: '青岛-> 黄岛(到时候先看有没有游轮)',
            time: '待定',
            driving: '待定',
            cost: '待定'
        },{
            title: '青岛海底世界',
            location: [120.335965,36.057005],
            memo: '自2022年6月1日至2022年12月31日 免费',
            time: '08:30-16:30',
            driving: '在第一海水浴场附件',
            cost: '150'
        },{
            title: '海军博物馆',
            location: [120.327949,36.05473],
            memo: '自2022年6月1日至2022年12月31日 免费',
            time: '08:00-17:30',
            driving: '去小青岛公园路过',
            cost: '待定'
        }]


        console.table(codeData.map(i => ({'名称': i.title, '费用': i.cost, '行程': i.driving, '开放时间': i.time, '备注': i.memo})))

        codeData.forEach(item => {
            onSetMarker(item)
        })
        var icon = new AMap.Icon({
            size: new AMap.Size(40, 50),    // 图标尺寸
            image: 'http://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
            imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
        });
        var icon1 = new AMap.Icon({
            size: new AMap.Size(40, 50),    // 图标尺寸
            image: 'http://webapi.amap.com/theme/v1.3/images/newpc/way_btn3.png',  // Icon的图像
            imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
        });
        function onSetMarker(row, img = 'http://vdata.amap.com/icons/b18/1/2.png') {
            // 创建一个 Marker 实例:
            var marker = new AMap.Marker({
                position: new AMap.LngLat(...row.location),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: row.title,
                offset: new AMap.Pixel(-10, -10),
                icon: img, // 添加 Icon 实例
            });
            marker.setLabel({
                offset: new AMap.Pixel(5, 5),  //设置文本标注偏移量
                content: "<div class='info'>"+ row.title +"</div>", //设置文本标注内容
                direction: 'bottom' //设置文本标注方位
            });
            onMarkerClick(marker, row)
            // 将创建的点标记添加到已有的地图实例:
            map.add(marker);
        }

        function onMarkerClick(marker, row){
            marker.on('click', () => {
                console.table(row)
            })
        }

        onSetMarker({
            title: '住宿',
            location: [120.421187,36.060894]
        }, 'http://vdata.amap.com/icons/b18/1/1.png')

        //
    </script>
</body>
</html>